<template>
  <div class="interface-list">
    <el-input size="mini" placeholder="请输入接口名称" prefix-icon="el-icon-search" v-model="searchInterface"></el-input>
    <el-table :data="searchInterfaceData"
              highlight-current-row
              @current-change="currentChange"
              row-class-name="rowCursor">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column property="siaName" label="接口名称" show-overflow-tooltip></el-table-column>
      <!--<el-table-column label="操作" width="60">
        <template slot-scope="scope">
          <i class="el-icon-delete rowCursor" @click="deleteInterface(scope.row)"></i>
        </template>
      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "InterfaceList",
    props: {
      interfaceData: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return{
        searchInterface: "",
        searchInterfaceData: this.interfaceData
      }
    },
    watch: {
      /**接口搜索过滤**/
      searchInterface(val) {
        this.searchInterfaceData = this.interfaceData.filter(item => {
          if (item.siaName.indexOf(val) >= 0) {
            return true;
          }
          return false;
        });
      },
      /**监听接口集合方便赋值给搜索集合**/
      interfaceData(val) {
        this.searchInterfaceData = val;
      }
    },
    methods: {
      /**删除接口**/
      deleteInterface(row) {
        this.$confirm('您确定删除该接口吗?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (let i = 0; i < this.interfaceData.length; i++) {
            if (this.interfaceData[i].siaId === row.siaId) {
              this.interfaceData.splice(i, 1);
              break;
            }
          }
          this.searchInterface = "";
          this.$emit("deleteCall", this.interfaceData.length, row.siaId);
        });
      },
      /**选中的接口**/
      currentChange(row){
        this.$emit("clickRowCall", row);
      },
    }
  }
</script>

<style scoped>
  .interface-list{
    height: 100%;
  }
</style>
